<template>
  <div>
    {{ goodsForm }}
    <el-card>
      <el-form ref="form" :model="goodsForm" label-width="80px">
        <div class="index-setp" v-if="setpIndex === 1">
          <div class="index-title">基本信息</div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品名称" required>
                <el-input v-model="goodsForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品编码">
                <el-input v-model="goodsForm.productSn"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品分类">
                <el-select
                  v-model="goodsForm.productCategoryName"
                  placeholder="请选择商品品牌"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品品牌">
                <el-select
                  v-model="goodsForm.brandName"
                  placeholder="请选择商品品牌"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品描述">
                <el-input
                  type="textarea"
                  style="widht:400px;"
                  v-model="goodsForm.description"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="index-title">商品属性</div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品原价">
                <el-input-number
                  v-model="goodsForm.price"
                  :min="1"
                  :max="Infinity"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="数据类型">
                <el-select
                  v-model="goodsForm.region"
                  placeholder="请选择商品品牌"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="活动价格">
                <el-input-number
                  v-model="goodsForm.originalPrice"
                  :min="1"
                  :max="Infinity"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item> </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item> </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="重量">
                <el-input-number
                  v-model="goodsForm.weight"
                  :min="1"
                  :max="Infinity"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="审核状态">
                <el-switch v-model="goodsForm.publishStatus"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否上架">
                <el-switch v-model="goodsForm.verifyStatus"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="缩略图">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ fileUrl }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="goodsForm.fileUrl"
                      alt=""
                    />
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="index-title">其他信息</div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="推荐状态">
                <el-switch v-model="goodsForm.recommendStatus"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="新品状态">
                <el-switch v-model="goodsForm.newStatus"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预告商品">
                <el-switch v-model="goodsForm.previewStatus"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键词">
                <el-input v-model="goodsForm.keywords"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="库存预警">
                <el-input-number
                  v-model="goodsForm.lowStock"
                  :min="1"
                  :max="Infinity"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品排序">
                <el-input-number
                  v-model="goodsForm.sort"
                  :min="1"
                  :max="Infinity"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="footer-step">
            <el-button
              @click="handleStep(1)"
              style="margin-left:4px;"
              type="primary"
              size="mini"
              >下一步</el-button
            >
          </div>
        </div>
        <div class="index-setp" v-if="setpIndex === 2">
          <div class="index-title">商品sku信息</div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="标题">
                <el-input v-model="goodsForm.detailTitle"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="副标题">
                <el-input
                  style="width: 400px;"
                  v-model="goodsForm.detailDesc"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="画册图片">
                <el-input v-model="goodsForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" style="display:flex;align-items:center;">
              <el-form-item label="sku设置" style="margin-bottom:0;">
                <el-input
                  placeholder="颜色描述"
                  v-model="goodsForm.skuColor"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-button style="margin-left:4px;" type="primary" size="mini"
                >创建颜色选项</el-button
              >
            </el-col>
            <el-col :span="6" style="display:flex;align-items:center;">
              <el-form-item label="sku设置" style="margin-bottom:0;">
                <el-input
                  placeholder="大小"
                  v-model="goodsForm.skuSize"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-button style="margin-left:4px;" type="primary" size="mini"
                >创建大小选项</el-button
              >
            </el-col>
            <el-col :span="8" style="display:flex;align-items:center;">
              <el-form-item label="">
                <el-button style="margin-left:4px;" type="primary" size="mini"
                  >生成sku列表</el-button
                >
                <el-button style="margin-left:4px;" type="primary" size="mini"
                  >新增sku</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <div class="footer-step">
            <el-button
              @click="goBack"
              style="margin-left:4px;"
              type=""
              size="mini"
              >上一步</el-button
            >
            <el-button
              @click="handleStep(2)"
              style="margin-left:4px;"
              type="primary"
              size="mini"
              >下一步,填写移动端详情</el-button
            >
          </div>
        </div>
        <div class="index-setp" v-if="setpIndex === 3">
          <el-card>
            <el-row>
              <el-col :span="10">
                <el-form-item label="备注">
                  <el-input
                    type="textarea"
                    style="widht:500px;"
                    v-model="goodsForm.note"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="富文本">
                <wang-editors @editChange="handleEditContent" />
              </el-form-item>
            </el-row>
            <div class="footer-step">
              <el-button
                @click="goBack"
                style="margin-left:4px;"
                type=""
                size="mini"
                >上一步</el-button
              >
              <el-button
                @click="handleStep(3)"
                style="margin-left:4px;"
                type="primary"
                size="mini"
                >提交保存</el-button
              >
            </div>
          </el-card>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import wangEditors from "../../components/wangEditors.vue"
export default {
  components: { wangEditors },
  data() {
    return {
      goodsForm: {
        name: "", //商品名称
        productSn: "", //商品编码
        productCategoryName: "", //商品分类
        brandName: "", //品牌
        description: "", //商品描述
        price: "", //原价
        originalPrice: "", //活动价格
        weight: "", //重量
        publishStatus: false, //审核状态
        verifyStatus: false, //是否上架
        recommendStatus: false, //是否推荐
        serviceIds: "1,2,3", //产品服务
        newStatus: false, //新品
        previewStatus: false, //预告
        keywords: "", //搜索关键词
        lowStock: "", //库存预警
        sort: "", //排序
        detailTitle: "", //标题
        detailDesc: "", //副标题
        pic: "", //画册图片
        skuColor: "", //颜色
        skuSize: "", //大小
        note: "", //备注
        detailMobileHtml: "", //富文本
      }, //商品信息
      pmsSkuStockList: [
        {
          spData: [
            { key: "颜色", value: "金色" },
            { key: "大小", value: "金色" },
          ],
          stock: "", //库存
          lowStock: "", //库存预警
          lockStock: "", //锁定库存
          sale: "", //销量
          price: "", //价格
          skuCode: "", //编号
        },
      ], //sku信息
      setpIndex: 1,
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 下一步
    handleStep(i) {
      console.log(i)
      this.setpIndex = i + 1
    },
    // 上一步
    goBack() {
      this.setpIndex = this.setpIndex - 1
    },
    handleEditContent(newVal) {
      console.log(newVal)
      this.goodsForm.detailMobileHtml = newVal
    },
  },
}
</script>

<style lang="scss">
.el-col {
  padding: 0 15px;
}
.el-textarea {
  width: 400px;
  textarea {
    height: 100px;
  }
}
.index-title {
  line-height: 40px;
  border-bottom: 1px dashed #eee;
  margin-bottom: 20px;
}
.footer-step {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
</style>
